<!--
名称: 搜索
作者: huangdi_cd
日期: 2021/4/15
说明: 用于快速统一构建弹窗页面
-->
<template>
    <div>
        <el-input :style="{width:`${setWidth}px`}"
           v-model="searchKey" placeholder="请输入内容"  @keyup.enter.native="searchHandler(searchKey)">
            <el-button slot="append" type="primary"
                style="background-color: #f04959"
                @click="searchHandler(searchKey)">
                <i class="el-icon-search" style="color: white"></i>
            </el-button>
        </el-input>
    </div>
</template>

<script>
    export default {
        name: 'AsearchCom',
        props: {
            setWidth: {
                type: Number,
                default: 200
            }
        },
        data () {
            return {
               searchKey: ''
            }
        },
        methods: {
            searchHandler (searchKey) {
                this.$emit('searchHandler', searchKey)
            }
        }

    }
</script>

<style scoped>
    .el-button--primary {
        border-radius: 0px !important;
    }
    .el-button--primary:hover {
        color: #FFFFFF !important;
        background-color: #f04959 !important;
        border-radius: 0px !important;
        border-color: #f04959 !important;
    }
    .el-button--primary:active {
        border-radius: 0px !important;
    }
    .el-button--primary:focus {
        color: #FFFFFF !important;
        background-color: #f04959 !important;
        border-radius: 0px !important;
        border-color: #f04959 !important;
    }
</style>
